<style lang="less">
     @import './index.less';
</style>

<template>
  <div>
    <Button icon="reply" type="text" @click="goForward">上一步</Button>
    <Card dis-hover>
      <Row :gutter="10">
        <i-col span="18">
          <div style="padding:10px">
            <h2>{{contractMes.contract_name}}</h2>
            <p>合同负责人：{{contractMes.responsible_name}}</p>
            <p>合作公司：{{contractMes.customer_name}}</p>
            <p>合同金额：{{contractMes.money}} 元</p>
          </div>
        </i-col>
      </Row>
    </Card>
    <Row class="margin-top-10" :gutter=10>
      <i-col span="17">
        <Card dis-hover>
          <Tabs value="1">
              <TabPane label="基本信息" name="1">
                <div class="division-tips">
                  <span>
                    <Icon type="arrow-down-b" size="12" class="padding-left-10 margin-right-10"></Icon>
                    基本信息
                  </span>
                </div>
                <div class="box">
                    <Row>
                      <i-col span="10">
                        <p>合同名称：{{contractMes.contract_name}}</p>
                      </i-col>
                      <i-col span="10">
                        <p>合同签订时间：{{contractMes.contract_date}}</p>
                      </i-col>
                    </Row>
                    <Row>
                      <i-col span="10">
                        <p>合同起始时间：{{contractMes.contract_start_date}}</p>
                      </i-col>
                      <i-col span="10">
                        <p>合同结束时间：{{contractMes.contract_end_date}}</p>
                      </i-col>
                    </Row>
                  </div>
                <div class="division-tips">
                    <span>
                      <Icon type="arrow-down-b" size="12" class="padding-left-10 margin-right-10"></Icon>
                      其他信息
                    </span>
                </div>
                <div class="box">
                  <Row :gutter=10>
                    <i-col span="6">
                      <p>备注：{{contractMes.remark}}</p>
                    </i-col>
                  </Row>
                </div>
              </TabPane>
              <TabPane label="产品信息" name="2">
                <Table :columns="productsColumns" :data="contractMes.sales"></Table>                
              </TabPane>
              <TabPane label="应收周期信息" name="3">
                <Table :columns="receivablesColumns" :data="contractMes.receivables"></Table>                
              </TabPane>
          </Tabs>
        </Card>
      </i-col>
      <i-col span="7">
        <Card>
          <Tabs value="1">
            <TabPane label="动态" name="1">
              <p>这里是动态的内容</p>
            </TabPane>
          </Tabs>
        </Card>
      </i-col>
    </Row>
    
  </div>
</template>

<script>

export default {
  data() {
    return {
      contractMes:{},
      productsColumns:[
        // {
        //   title: '序号',
        //   type: 'index',
        //   align:'center',
        // },
        {
          title:'产品名称',
          key:'product_name',
          align:'center'
        },{
          title:'单价（元）',
          key:'price',
          align:'center'
        },{
          title:'数量',
          key:'quantity',
          align:'center'
        },{
          title:'优惠金额',
          key:'amount',
          align:'center'
        }
      ],
      receivablesColumns:[
        // {
        //   title:'序号',
        //   type:'index',
        //   align:'center'
        // },
        {
          title:'应收期次',
          key:'count',
          align:'center'
        },{
          title:'应收截止时间',
          key:'receivable_date',
          align:'center'
        },{
          title:'应收金额',
          key:'receivable_amount',
          align:'center'
        }
      ]
    }
  },
  methods: {
    goForward() {
      this.$router.go(-1)
    },
    getContract(id) {
      this.$http.get('/fi/contracts/' + id).then((res) => {
        this.contractMes = res.data.returnValue
      })
    }
  },
  mounted() {
    //this.contractMes = this.$route.query
    this.getContract(this.$route.params.id)
  }
}
</script>

